<template>
  <div class="form-relation-detail-tabs">
    <div class="form-relation-detail-tab-item" @click="() => change(item)"
         :class="{'form-relation-detail-tab-item-active': item.viewId === activeViewId}"
         :key="item.viewId" v-for="item in listViewsConfigs">
      {{ getViewName(item.viewId) }}
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FormRelationDetailTabs',
  props: {
    viewId: createProps(String),
    actionId: createProps(String),
    listViewsConfigs: createProps(Array, () => []),
    formDefinition: createProps(Object, createFormDefinition)
  },
  methods: {
    change({actionId, viewId}) {
      this.$emit('update:actionId', actionId);
      this.$emit('update:viewId', viewId);
    },
    getViewName(viewId) {
      let views = this.formDefinition && this.formDefinition.views || [];
      let view = views.find(item => item.id === viewId);
      return view && view.viewName || '';
    },
  },
  computed: {
    activeViewConfig() {
      let list = this.listViewsConfigs || [];
      let item = list.find(item => item.viewId === this.viewId);
      if (item) return item;

      if (!this.listViewsConfigs || !this.listViewsConfigs.length) return undefined;
      item = this.listViewsConfigs[0];
      this.$emit('update:actionId', item.actionId);
      this.$emit('update:viewId', item.viewId);
      return item;
    },
    activeActionId() {
      if (!this.activeViewConfig) return undefined;
      return this.activeViewConfig.actionId;
    },
    activeViewId() {
      if (!this.activeViewConfig) return undefined;
      return this.activeViewConfig.viewId;
    },
  }
};
</script>
<style>
.form-relation-detail-tabs {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-bottom: 2px solid #a8abb2;
}

.form-relation-detail-tab-item {
  height: 100%;
  margin-bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  cursor: pointer;
  overflow: visible;
}

.form-relation-detail-tab-item:hover,
.form-relation-detail-tab-item-active {
  color: #00A0E9;
  border-bottom: 2px solid #00A0E9;
}
</style>